﻿<div class="m-subheader ">
    <div class="d-flex align-items-center">
        <div class="mr-auto col-xs-6">
            <h3 class="m-subheader__title">
                <span>成本展示</span>
            </h3>
            <span style="display: inline-block; width: 280px;">
                <span style="margin-left:10px;">选择时间：</span>
                <div style="width:120px;display:inline-block;">
                    <p-calendar [(ngModel)]="selectedDate" view="month" dateFormat="yy-mm" [yearNavigator]="true" yearRange="2000:2030" [locale]="calendarHelper.cn"></p-calendar>
                </div>
            </span>

            <div style="display: inline-block; width: 200px;">
                <span style="margin-left:10px;">车间：</span>
                <div style="width:120px;display:inline-block;">
                    <select #workShopCombobox name="workShopname" class="form-control" [(ngModel)]="workShop">
                        <option *ngFor="let workShopCombobox of workShopComboboxs" [value]="workShopCombobox.value">{{ workShopCombobox.displayText }}
                        </option>
                    </select>
                </div>
            </div>
            <div style="display: inline-block;">
                <span style="margin-left:10px;">关键字：</span>
                <div style="display:inline-block;">
                    <input type="text" class="form-control" [(ngModel)]="filterText" style="width:200px;display:inline-block;">

                    <button class="btn btn btn-primary" type="button" (click)="getContracts()" style="margin-left: 40px;">查询</button>
                </div>
            </div>


        </div>
    </div>
</div>

<div class="m-content">
    <div class="m-portlet m-portlet--mobile">
        <div class="m-portlet__body">
            <div class="row align-items-center">
                <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                    <p-table #dataTable (onLazyLoad)="getContracts($event)" [value]="primengTableHelper.records" rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
                        [paginator]="false" [lazy]="true" [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive"
                        dataKey="id" [resizableColumns]="primengTableHelper.resizableColumns">
                        <ng-template pTemplate="header">
                            <tr>
                                <th width="220px">
                                    条码
                                </th>
                                <th width="120px">
                                    任务号
                                </th>
                                <th width="120px">
                                    图号
                                </th>
                                <th width="120px">
                                    产品名称
                                </th>
                                <th width="100px" *ngFor="let col of cols">
                                    <span style="font-size: 12px; color: #444;">
                                        {{ col.category }}
                                    </span>
                                    <br />
                                    <span *ngIf="col.category !== col.title" style="font-size: 10px; font-weight: 400; color: #666;">
                                        {{ col.title }}
                                    </span>
                                </th>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-record="$implicit">
                            <tr>
                                <td width="220px">
                                    {{ record.id }}@{{ record.quantity }}
                                </td>
                                <td width="120px">
                                    {{ record.taskNum }}
                                </td>
                                <td width="120px">
                                    {{ record.productName }}
                                </td>
                                <td width="120px">
                                    {{ record.productId }}
                                </td>
                                <td width="100px" *ngFor="let col of cols">
                                    {{ (record?.detail)[col.category + col.title] | number: "1.2-2" }}
                                </td>
                            </tr>
                        </ng-template>
                    </p-table>

                    <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                        {{ l("NoData") }}
                    </div>
                    <div class="primeng-paging-container">
                        <p-paginator rows="{{ primengTableHelper.defaultRecordsCountPerPage }}" #paginator (onPageChange)="getContracts($event)"
                            [totalRecords]="primengTableHelper.totalRecordsCount" [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                        </p-paginator>
                        <span class="total-records-count">
                            {{ l("TotalRecordsCount", primengTableHelper.totalRecordsCount) }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
